<template>
  <div id="app">
    <!-- 顶部通栏 -->
    <TopBar :key="topBarKey" />
    <!-- 头部 -->
    <Header />
    <router-view @changeKey="changeKey" />
    <!-- 底部 -->
    <Footer />
    <Login />
    <Toast v-show="isShowToast" />
  </div>
</template>
<script>
import Header from "@/components/public/Header";
import TopBar from "@/components/public/TopBar";
import Footer from "@/components/public/Footer";
import Login from "./components/public/Login.vue";
import Toast from "@/components/public/Toast";
import { mapState } from "vuex";
export default {
  components: {
    Header,
    TopBar,
    Footer,
    Login,
    Toast,
  },
  data() {
    return {
      topBarKey: 1,
    };
  },
  computed: {
    ...mapState({
      isShowToast: (state) => state.showToast.isShowToast,
    }),
  },
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.topBarKey++;
        }
      },
    },
  },
  methods: {
    changeKey() {
      this.topBarKey++;
    },
  },
};
</script>
<style lang="less">
</style>
